@use "var.scss" as *;

// 上下左右居中
// 定义一个名为 layout 的 SCSS mixin，用于创建 Flex 布局
@mixin layout(
    $justify-content: flex-start,
    // 横轴对齐方式，默认为 flex-start
    $align-items: stretch,
    // 纵轴对齐方式，默认为 stretch
    $flex-direction: row,
    // 主轴方向，默认为水平方向 (row)
    $flex-wrap: nowrap // 是否换行，默认为不换行 (nowrap)
) {
    display: flex; // 使用 Flex 布局
    justify-content: $justify-content; // 设置主轴上的对齐方式
    align-items: $align-items; // 设置纵轴上的对齐方式
    flex-direction: $flex-direction; // 设置主轴方向
    flex-wrap: $flex-wrap; // 设置是否允许换行
}

// 图标
// 定义一个名为 icon 的 SCSS mixin，用于设置图标的尺寸和颜色
@mixin icon(
    $size: 1.5em,
    // 图标的尺寸，默认为 1.5em
    $color: $color-black // 图标的颜色，默认为 $color-black 变量的值
) {
    width: $size; // 设置图标的宽度
    height: $size; // 设置图标的高度
    font-size: $size; // 设置图标的字体大小
    color: $color; // 设置图标的颜色
    fill: currentColor; // 填充颜色与当前颜色一致
    overflow: hidden; // 隐藏图标超出尺寸范围的部分
    position: relative; // 设置定位为相对定位，以便在需要时进行位置调整
}

// 定义一个名为 box-shadow 的 SCSS mixin，用于设置元素的阴影效果
@mixin box-shadow($box-shadow) {
    -webkit-box-shadow: $box-shadow; // 设置 Webkit 浏览器的阴影效果
    -moz-box-shadow: $box-shadow; // 设置 Mozilla Firefox 浏览器的阴影效果
    box-shadow: $box-shadow; // 设置标准的阴影效果（适用于大多数现代浏览器）
}
